<template>
	<view class="myRing" :style="{paddingTop:statusBarHeight+'rpx'}">
		<request-loading></request-loading>
		<view class="contact-header">
					广场
				</view>
		<view class="top">
			<!-- <image src="../../static/D-49/banner_3x.png" class="top-img"></image> -->
			<!-- <view class="title">
				<text class="myRing-name">一汽大众-奥迪车友圈</text>
				<image src="../../static/D-49/crown_3x.png" class="crown"></image>
				<text class="rank">车友榜本月第1名</text>
			</view> -->
			<view class="float">
				<view class="inner">
					热门话题 <image src="../../static/icon/icons/triangle.png" class="triangle"></image>
				</view>
				<view class="inner" @click="toReleaseDynamic">
					发布动态 <image src="../../static/icon/icons/triangle.png" class="triangle"></image>
				</view>
			</view>
		</view>
		<uni-collapse accordion="true">
			<uni-collapse-item>
				<view class="middle">
					<view class="middle-box" v-for="(item, index) in hotTopicList" :key="item.id " @click="toLabelDetail(item.id)">
						<view class="middle-content">
							<image src="http://r7hqyjfy6.hn-bkt.clouddn.com/hot.png" class="myRing-avatar"></image>
							<text class="content-name">{{item.name}}</text>
						</view>
					</view>
					<!-- <view class="middle-box">
						<view class="middle-content">
							<image src="../../static/D-49/image_4_3x.png" class="myRing-avatar"></image>
							<text class="content-name">#特斯拉刹车失灵</text>
						</view>
					</view> -->
				</view>
			</uni-collapse-item>
		</uni-collapse>

		<view class="bottom">
			<view class="bottom-content">
							<view style="display: flex;flex-wrap: wrap;">
								<navigator class="wrapper" v-for="(item, index) in dynamicList" @click="toDetail(item.id)" :key="item.id">
									<image :src="item.picture" class="w-img"></image>
									<view class="text">
										{{item.words}}
									</view>
									<view>{{item.name}}</view>
									<view class="footer">
										<view class="users">
											<image src="../../static/D-49/image_2_1_3x.png" class="users-avatar">
											</image>
											<text class="users-name">史迪仔</text>
										</view>
										<view class="browse">
											<image src="../../static/icon/icons/eye.png" class="browse-img"></image>
											<text class="browse-count">6.3W</text>
										</view>
									</view>
								</navigator>
							</view>
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/api/api.js'
	import popup from "../../components/popup/popup-layer.vue"
	export default {
		data() {
			return {
				mask: false,
				menuFlag: false,
				current_list: 0,
				elemList: [
					1
				],
				isBlock: false,
				// 热门话题
				hotTopicList: [],
				dynamicList: [],
				statusBarHeight: 0,
			}
		},
		methods: {
			clickMenu() {
				this.menuFlag = !this.menuFlag;
			},
			handler(e) {
				this.current_list = e.target.dataset.id
			},
			tabChange(e) {
				this.current_list = e.detail.current
			},
			block() {
				this.isBlock = !this.isBlock
			},
			openPopup() {
				this.$refs.popupRef.show()
			},
			closePopup() {
				this.$refs.popupRef.close()
			},
			change() {},

			/**
			 * 获取热门话题列表
			 */
			async getDataList() {
				const res = await api.networdCircle.getDataList()
				if (res.code === 200) {
					this.hotTopicList = res.data
				}
			},
			/**
			 * 获取所有动态
			 */
			async getDynamicList() {
				const res = await api.dynamic.getDynamicList()
				if (res.code === 200) {
					this.dynamicList = res.data
				}
			},
			// 动态详情页面
			toDetail(id) {
				uni.navigateTo({
					url: "/pages/details/details?id="+id
				})
			},
			// 动态详情页面
			toLabelDetail(labelId) {
				uni.navigateTo({
					url: "/pages/myLabelRing/myLabelRing?labelId="+labelId
				})
			},
			// 跳转发布动态页面
			toReleaseDynamic() {
				uni.navigateTo({
					url: "/pages/releaseDynamic/releaseDynamic"
				})
			}
		},
		
		computed: {
			height() {
				return Math.ceil(this.elemList.length / 2) * 2000
			}
		},
		watch: {

		},
		components: {
			popup
		},

		onShow() {
			const res = uni.getSystemInfoSync()
			this.statusBarHeight = res.statusBarHeight
			this.getDataList()
			this.getDynamicList()
		}
	}
</script>

<style>
	.contact-header{
		padding: 40rpx 0;
		box-sizing: border-box;
		font-size: 48rpx;
		font-weight: 600;
	}
	/* 全局样式 */
	.myRing {
		width: 100vw;
		height: auto;
		padding: 0 16rpx;
		box-sizing: border-box;
	}

	/* 顶部 */
	.top {
		width: 100%;
		/* height: 300rpx; */
		position: relative;
		background-size: 100% 100%;
		background-repeat: no-repeat;
		background-position: center;
		margin-bottom: 92rpx;
	}

	.top-img {
		width: 100%;
		height: 300rpx;
		position: absolute;
		top: 0;
		right: 0;
	}

	.title {
		position: absolute;
		left: 30rpx;
		bottom: 70rpx;
		display: flex;
		align-items: center;
	}

	.myRing-name {
		font-family: PingFang SC;
		font-size: 40rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #ffffff;
	}

	.crown {
		width: 70rpx;
		height: 70rpx;
		margin: 0 5rpx;
	}

	.rank {
		height: 28rpx;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #f5f51b;
	}

	.float {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		bottom: -80rpx;
		display: flex;
		box-sizing: border-box;
		margin: auto;
		padding: 32rpx 30rpx;
		background-color: white;
		border-radius: 20rpx;
		width: 690rpx;
		height: 104rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
	}

	.inner {
		width: 50%;
		text-align: center;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #252525;
	}

	.inner:nth-child(1) {
		border-right: 3rpx solid #E4E4E4;
		text-align: left;
	}

	.triangle {
		width: 35rpx;
		height: 35rpx;
		vertical-align: middle;
	}

	/* 中部 */
	.middle {
		width: 690rpx;
		height: 286rpx;
		background-color: #ffffff;
		box-shadow: 0rpx 6rpx 12rpx 0rpx rgba(0, 0, 0, 0.16);
		border-radius: 20rpx;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		margin: 0 auto;
	}

	.middle-box {
		width: 50%;
		padding: 0 30rpx;
		box-sizing: border-box;
	}

	.middle-title {
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #252525;
	}

	.middle-content {
		margin-top: 20rpx;
	}

	.myRing-avatar {
		width: 60rpx;
		height: 48rpx;
		border-radius: 4rpx;
		vertical-align: middle;
	}

	.content-name {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #373737;
		margin-left: 12rpx;
	}

	/* 尾部 */
	swiper {
		height: calc(100vh - 610rpx);
	}

	scroll-view {
		height: calc(100vh - 610rpx);
	}

	.bottom-lists {
		display: flex;
		margin: 22rpx 0;
		margin-left: 30rpx;
	}

	.bottom-list {
		margin-left: 30rpx;
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #7a7a7a;
	}

	.active {
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #373737;
		padding-bottom: 10rpx;
		border-bottom: 4rpx solid rgba(245, 97, 12, 1);
	}

	.bottom-content {
		width: 690rpx;
		margin: 0 auto;
	}

	.swiper-item {
		display: flex;
		justify-content: space-between;
	}

	.wrapper {
		width: 330rpx;
		height: 450rpx;
		margin-right: 15rpx;
		margin-top: 20rpx;
	}

	.w-img {
		width: 330rpx;
		height: 300rpx;
		border-radius: 20rpx;
	}

	.text {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #393939;
	}

	.footer {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 0;
	}

	.users-avatar {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 5rpx;
	}

	.users-name {
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #979797;
	}

	.browse-img {
		width: 35rpx;
		height: 25rpx;
		margin-right: 3rpx;
	}

	.browse-count {
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: #979797;
	}

	#circle-link {
		width: 64rpx;
		height: 64rpx;
		position: fixed;
		top: 900rpx;
		right: 30rpx;
		z-index: 99;
	}

	.circle-link {
		width: 64rpx;
		height: 64rpx;
	}

	.swiper-item-link {
		width: 98%;
		margin: 0 auto;
		padding-bottom: 8rpx;
		height: 34rpx;
		display: flex;
	}

	.swiper-item-title-img {
		width: 100rpx;
		height: 36rpx;
		background-color: rgba(79, 79, 233, 1);
		border-radius: 4rpx;
		vertical-align: middle;
		text-align: center;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(255, 255, 255, 1);
	}

	.swiper-item-title {
		width: 448rpx;
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(81, 81, 81, 1);
		margin-left: 15rpx;
		text-overflow: ellipsis;
		white-space: nowrap;
		overflow: hidden;
	}

	.swiper-item-box {
		width: 98%;
		height: auto;
		margin: 0 auto;
	}

	.swiper-item-box-wrapper {
		margin: 0 auto;
		width: 100%;
		height: auto;
		border-top: solid 1rpx rgba(219, 219, 219, 1);
		margin: 0 auto;
		background-color: white !important;
	}

	.swiper-item-box-top {
		width: 100%;
		height: auto;
		display: flex;
		align-items: center;
		padding: 28rpx 0;
	}

	.users-avatar {
		width: 64rpx;
		height: 64rpx;
		vertical-align: middle;
		border-radius: 50%;
	}

	.browse {
		margin-left: 16rpx;
		height: 64rpx;
		display: flex;
		align-items: center;
	}


	.users-name {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(81, 81, 81, 1);
	}

	.car {}

	.car-logo {
		width: 24rpx;
		height: 24rpx;
		vertical-align: middle;
	}

	.swiper-item-box-top-browse {
		display: flex;
		flex-flow: column;
		margin-left: 16rpx;
		justify-content: space-around;
	}

	.car-name {
		font-family: PingFang SC;
		font-size: 18rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: rgba(81, 81, 81, 1);
	}

	.attention {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: rgba(245, 97, 12, 1);
		flex-grow: 1;
		text-align: right;
	}

	/* .swiper-item-box-middle {} */

	.swiper-item-box-middle-top {
		display: flex;
		justify-content: space-between;
	}

	.swiper-item-box-middle-text {
		font-family: PingFang SC;
		font-size: 24rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(81, 81, 81, 1);
	}

	.swiper-item-box-middle-like {
		width: 58rpx;
		height: 42rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
	}

	.like-img {
		width: 30rpx;
		height: 30rpx;
	}

	.like-count {
		font-family: PingFang SC;
		font-size: 28rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(184, 184, 184, 1);
	}

	.swiper-item-box-middle-imgs {
		display: flex;
		justify-content: space-evenly;
		margin-top: 10rpx;
	}

	.swiper-item-box-middle-img-a {
		width: 210rpx;
		height: 180rpx;
	}

	.swiper-item-box-middle-img-b {
		width: 49%;
		height: 168rpx;
	}

	.swiper-item-box-bottom {
		margin-top: 36rpx;
	}

	.swiper-item-box-bottom-top {
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.swiper-item-box-bottom-top-info {
		margin-left: 20rpx;
		display: flex;
		align-items: center;
	}

	.info-avatar {
		width: 34rpx;
		height: 34rpx;
	}

	.info-name {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		letter-spacing: 0rpx;
		color: rgba(184, 184, 184, 1);
		margin-left: 16rpx;
	}

	.swiper-item-box-bottom-inner {
		margin-left: 20rpx;
		padding: 16rpx 0;
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(75, 75, 75, 1);
	}

	.swiper-item-box-foot {
		margin-top: 10rpx;
		display: flex;
		align-items: center;
	}

	.share-it {
		padding: 0 20rpx;
	}

	.foot-comment {}

	.foot-time {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(95, 95, 95, 1);
		flex-grow: 1;
		text-align: right;
	}

	.foot-img {
		width: 50rpx;
		height: 50rpx;
		vertical-align: middle;
	}

	.foot-img-img {
		width: 30rpx;
		height: 30rpx;
		vertical-align: middle;
		margin-right: 15rpx;
	}

	.foot-text {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(93, 93, 93, 1);
	}

	.square-link {
		width: 184rpx;
		height: 64rpx;
		background-color: rgba(245, 97, 12, 0.93);
		border-radius: 32rpx;
		position: fixed;
		top: 900rpx;
		right: 108rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center;
		z-index: 99;
	}

	.square-link-img {
		width: 58rpx;
		height: 58rpx;
		margin-top: 10rpx;
	}

	.popup-all {
		width: 100vw;
	}

	.popup-top {
		height: 360rpx;
		display: flex;
		background-color: #F5F5F5;
	}

	.popup-bottom {
		height: 150rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.popup-item {
		padding: 36rpx;
	}

	.popup-icon {
		width: 88rpx;
		height: 88rpx;
		border-radius: 50%;
	}

	.popup-text {
		font-family: PingFang SC;
		font-size: 20rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(50, 50, 50, 1);
	}

	.cancel {
		font-family: PingFang SC;
		font-size: 32rpx;
		font-weight: normal;
		font-stretch: normal;
		line-height: 34rpx;
		letter-spacing: 0rpx;
		color: rgba(50, 50, 50, 1);
		background-color: #FFFFFF;
	}

	.menu {
		position: fixed;
		width: 34rpx;
		height: 34rpx;
		border-radius: 50%;
		right: 5rpx;
		bottom: 224rpx;
		z-index: 999;
	}

	.menuTrigger {
		position: absolute;
		top: 0;
		right: 0;
		width: 90rpx;
		height: 90rpx;
		border-radius: 50%;
		cursor: pointer;
		transition: .35s ease;
	}

	.menuItem {
		position: absolute;
		width: 34rpx;
		height: 34rpx;
		top: 0upx;
		left: 10upx;
		padding: 20upx;
		border-radius: 50%;
		border: none;
		z-index: -1000;
		opacity: 0;
		background-color: rgb(245, 97, 12);
	}

	.menuItem1 {
		transition: .35s ease;
	}

	.menuItem2 {
		transition: .35s ease .1s;
	}

	.menuItem3 {
		transition: .35s ease .2s;
	}

	.menu.active .menuTrigger {
		transform: rotateZ(225deg);
	}

	.menu.active .menuItem1 {
		top: -106upx;
		left: -120upx;
		opacity: 1;
	}

	.menu.active .menuItem2 {
		top: 10upx;
		left: -164upx;
		opacity: 1;
	}

	.menu.active .menuItem3 {
		top: 126upx;
		left: -120upx;
		opacity: 1;
	}
</style>
